<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let user = { name: "rose", age: 19 };

      function updateView(type, target, key, receiver) {
        console.log(type, "更新界面", target, key, receiver);
      }

      let userProxy = new Proxy(user, {
        //target表示被代理的原始对象 key访问的属性名 receiver代理对象
        get(target, key, receiver) {
          updateView("get", target, key, receiver);
          return Reflect.get(target, key, receiver);
        },
        //要设置的值
        set(target, key, value, receiver) {
          updateView("set", target, key, receiver);
          return Reflect.set(target, key, value, receiver);
        },
        //当删除属性时被拦截
        deleteProperty(target, key) {
          updateView("delete", target, key);
          return Reflect.deleteProperty(target, key);
        },
      });

      userProxy.name = "mark";
      userProxy.age = 20;
      console.log(userProxy.name, userProxy.age);
      delete userProxy.age;
      delete userProxy.name;
    </script>
  </body>
</html>
